<template>
  <div class="container">
    <div class="handle-box">
      <el-button
        type="primary"
        @click="Additions"
        style="padding: 9px 20px;margin-bottom:15px;font-size: 12px;float: left"
      >添加工具端账号</el-button>
    </div>
    <el-table :data="data" id="out-table" border style="width: 100%">
      <el-table-column prop="organizationUserId" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="roleNames" label="角色"></el-table-column>
      <el-table-column prop="status" label="有无工具端权限" :formatter="stateFormat"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" disabled @click="PersonnelSee(scope.$index, scope.row)">查看</el-button>
          <el-button type="text" disabled>编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="pageData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageData: undefined,
      total: 0,
      fengye: 1,
      delVisible: false,
      name: "",
      organizationUserId: "",
      roleNames: "",
      phone: "",
      status: ""
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    //状态码判断
    stateFormat(row, status) {
      if (row.status === 0) {
        return "无";
      } else if (row.status === 1) {
        return "有";
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(
        localStorage.getItem("organizationIds")
      )[0];
      this.url = "/api/user/xzs/organizationUser.list.get";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId: organizationId
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          }
        ]
      })
        .then(res => {
          this.tableData.reverse();
          this.tableData = res.data.data;
        })
        .catch(err => {});
    },
    //人员管理点击添加方法
    Additions() {
      this.$router.push({ path: "/home/Additions", params: { id: "1" } });
    },
    //人员管理查看详情
    PersonnelSee(index, row) {
      this.$router.push({
        path: "/home/PersonnelSee?organizationUserId=" + row.organizationUserId
      });
      location.reload();
    }
  }
};
</script>

<style>
.box {
  padding: 20px;
  background: white;
}
</style>
  